<!--
 * @Author       : qwguo
 * @description  : 团体高定模块
 * @Date         : 2020-11-10 22:23:12
 * @LastEditors  : qwguo
 * @LastEditTime : 2020-11-24 12:43:51
 * @FilePath     : \mlcc_web_project\mlcc-web-project\src\views\group-order\components\clothing-custom.vue
-->

<template>
    <div class="GO-clothing-custom">
        <div class="w w-box step-area">
            <span class="step-item" :class="{ active: item.active }" v-for="(item, index) in stepTitle" :key="index"
                  @click="switchStep(index)">
                <img :src="item.icon"/>
                <b>{{ item.name }}</b>
                <hr v-if="index < stepTitle.length - 1"/>
            </span>
        </div>
        <div class="w w-box con-area">
            <!--服装类别信息填写 start-->
            <div class="clothes-type-area" v-if="curStepIndex === 0">
                <div class="tip-area" v-if="clothesTypeData.loaded">
                    <span class="selected-tip-box" v-for="(item, index) in clothesTypeData.tabList"
                          :class="`tip-${index}`">
                        {{ item.selectedItem ? item.selectedItem.categoryName : '未选择' }}
                    </span>
                </div>
                <el-tabs :tab-position="'left'" v-model="clothesTypeName" class="tab-area"
                         @tab-click="changeClothesTypeTab" v-if="clothesTypeData.loaded">
                    <el-tab-pane class="store-pane" :name="`clothes_${index}`" :dataId="item.id" :label="item.parameter"
                                 v-for="(item, index) in clothesTypeData.tabList" :key="index">
                        <div class="clothes-list">
                            <el-radio-group class="pic-radio-group" v-model="item.selected"
                                            v-if="item.list && item.list.length">
                                <el-radio :label="v.id" @change="clothesRadioChange(item, v)"
                                          v-for="(v, i) in item.list" :key="i">
                                    <img :src="v.img" alt=""/>
                                    <span class="No">{{ v.categoryName }}</span>
                                </el-radio>
                            </el-radio-group>
                            <div v-else class="empty-box">暂无数据~~</div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!--服装类别信息填写 end-->
            <!--面料，辅料信息填写 start-->
            <div class="fabric-type-area" v-if="curStepIndex === 1">
                <el-tabs :tab-position="'left'" v-model="fabricTypeName" class="tab-area"
                         @tab-click="changeFabricTypeTab">
                    <el-tab-pane class="store-pane" label="面料" name="fabric" :dataId="0">
                        <div class="search-box">
                            <span class="label">面料号查找</span>
                            <el-input placeholder="请输入面料编号" suffix-icon="el-icon-search" v-model="fabricData.searchCode"
                                      @input="getFabricData" :style="{ width: '325px' }"></el-input>
                        </div>
                        <div class="fabric-list">
                            <el-radio-group class="pic-radio-group" v-model="fabricData.selectedId">
                                <el-radio :label="item.id" v-for="(item, index) in fabricData.list" :key="index"
                                          @change="fabricRadioChange(fabricData, item)">
                                    <div class="pic-box" @click="selectCurFabric(item)">
                                        <!--<img :src="item.fabricImg" alt="" style="background-size: 50%"/>-->
                                        <el-image
                                                style="width: 100%;height: 100%"
                                                :src="item.fabricImg"
                                                fit="cover"></el-image>
                                    </div>
                                    <span class="No">{{ item.fabricCode }}</span>
                                    <span class="inventory">当前库存：{{ item.inventory }}{{ item.fabricUnit }}</span>
                                </el-radio>
                            </el-radio-group>
                            <!--分页插件-->
                            <div class="mom-pagination">
                                <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="pageTotal"
                                        :page-size="pageSize"
                                        :pager-count="pagerCount"
                                        @next-click="currentPage+=1,handleCurrentChange"
                                        @prev-click="currentPage-=1,handleCurrentChange"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="store-pane" label="里布" name="inFabric" :dataId="1">
                        <div class="search-box">
                            <span class="label">里布号查找</span>
                            <el-input placeholder="请输入里布编号" suffix-icon="el-icon-search"
                                      v-model="inFabricData.searchCode" @keyup.enter.native="getInFabricData"
                                      :style="{ width: '325px' }" @input="getInFabricData"></el-input>
                        </div>
                        <div class="fabric-list">
                            <el-radio-group class="pic-radio-group" v-model="inFabricData.selectedId">
                                <el-radio :label="item.id" v-for="(item, index) in inFabricData.list" :key="index"
                                          @change="fabricRadioChange(inFabricData, item)">
                                    <div class="pic-box">
                                        <!--<img :src="item.fabricImg" alt="" />-->
                                        <el-image
                                                style="width: 100%;height: 100%"
                                                :src="item.libuImg"
                                                fit="cover"></el-image>
                                    </div>
                                    <span class="No">{{ item.materialName }}</span>
                                    <span class="inventory">编号：{{ item.libuCode }}</span>
                                </el-radio>
                            </el-radio-group>

                            <!--分页插件-->
                            <div class="mom-pagination">
                                <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="pageTotal2"
                                        :page-size="pageSize"
                                        :pager-count="pagerCount2"
                                        @next-click="currentPage+=1,handleCurrentChange2"
                                        @prev-click="currentPage-=1,handleCurrentChange2"
                                        @current-change="handleCurrentChange2"
                                >
                                </el-pagination>
                            </div>

                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="store-pane" label="底领呢" name="botFabric" :dataId="2">
                        <div class="search-box">
                            <span class="label">底领呢编号查找</span>
                            <el-input placeholder="请输入底领呢编号" suffix-icon="el-icon-search"
                                      v-model="botFabricData.searchCode" @keyup.enter.native="getBotFabricData"
                                      :style="{ width: '325px' }" @input="getBotFabricData"></el-input>
                        </div>
                        <div class="fabric-list">
                            <el-radio-group class="pic-radio-group" v-model="botFabricData.selectedId">
                                <el-radio :label="item.id" v-for="(item, index) in botFabricData.list" :key="index"
                                          @change="fabricRadioChange(botFabricData, item)">
                                    <div class="pic-box">
                                        <!--<img :src="item.fabricImg" alt="" />-->
                                        <el-image
                                                style="width: 100%;height: 100%"
                                                :src="item.img"
                                                fit="cover"></el-image>
                                    </div>
                                    <span class="No">{{ item.materialName }}</span>
                                    <span class="inventory">编号：{{item.dilinniNumber}}</span>
                                </el-radio>
                            </el-radio-group>

                            <!--分页插件-->
                            <div class="mom-pagination">
                                <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="pageTotal3"
                                        :page-size="pageSize"
                                        :pager-count="pagerCount3"
                                        @next-click="currentPage+=1,handleCurrentChange3"
                                        @prev-click="currentPage-=1,handleCurrentChange3"
                                        @current-change="handleCurrentChange3"
                                >
                                </el-pagination>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="store-pane" label="纽扣" name="buttonFabric" :dataId="3">
                        <div class="search-box">
                            <span class="label">纽扣编号查找</span>
                            <el-input placeholder="请输入纽扣编号" suffix-icon="el-icon-search"
                                      v-model="buttonData.searchCode" @keyup.enter.native="getButtonData"
                                      :style="{ width: '325px' }" @input="getButtonData"></el-input>
                        </div>
                        <div class="clothes-list">
                            <el-radio-group class="pic-radio-group" v-model="buttonData.selectedId">
                                <el-radio :label="item.id" v-for="(item, index) in buttonData.list" :key="index">
                                    <img :src="item.buttonsImg" alt=""/>
                                    <span class="No">{{ item.materialName }}</span>
                                </el-radio>
                            </el-radio-group>
                        </div>

                        <!--分页插件-->
                        <div class="mom-pagination">
                            <el-pagination
                                    background
                                    layout="prev, pager, next"
                                    :total="pageTotal4"
                                    :page-size="pageSize"
                                    :pager-count="pagerCount4"
                                    @next-click="currentPage+=1,handleCurrentChange4"
                                    @prev-click="currentPage-=1,handleCurrentChange4"
                                    @current-change="handleCurrentChange4"
                            >
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!--面料，辅料信息填写信息填写 end-->
            <!--服装类别和工艺 start-->
            <div class="type-craft-area" v-if="curStepIndex === 2">
                <div class="type-craft-list" v-if="typeCraftData.loaded">
                    <div class="list-box" v-for="(item, index) in typeCraftData.list" :key="index">
                        <div class="list-item-title">
                            <span>{{ item.parameter }}</span>
                        </div>
                        <div class="clothes-list">
                            <el-radio-group v-if="item.categoryInfoList.length" class="pic-radio-group"
                                            v-model="item.selectedId">
                                <el-radio :label="v.id" @change="typeCraftRadioChange(item, v)"
                                          v-for="(v, i) in item.categoryInfoList" :key="i">
                                    <div class="img-box">
                                        <img :src="v.img" alt=""/>
                                    </div>
                                    <span class="No">{{ v.categoryName }}</span>
                                </el-radio>
                            </el-radio-group>
                            <div v-else class="empty-box">暂无数据~~</div>
                        </div>
                    </div>
                    <!--滑块样式，先取消-->
                    <!--<div class="clothes-list">
                        <div class="slider-box">
                            <el-slider v-model="typeCraftData.value1" :step="20" show-stops> </el-slider>
                        </div>
                    </div>-->
                </div>
            </div>
            <!--服装类别和工艺 end-->
            <!--绣字和撞色 start-->
            <div class="font-color-area" v-if="curStepIndex === 3">
                <el-tabs :tab-position="'left'" v-model="fontColorTypeName" class="tab-area"
                         @tab-click="changeFontColorTypeTab">
                    <el-tab-pane class="store-pane" label="绣字选择" name="fontType" :dataId="0">
                        <el-form :model="fontData" label-width="110px">
                            <el-form-item label="绣字类型" required>
                                <el-select v-model="fontData.fontType" placeholder="选择绣字类型"
                                           :style="{ width: '360px', marginRight: '10px' }" @change="changeFontType">
                                    <el-option v-for="(item, index) in fontData.fontTypeList" :label="item.text"
                                               :value="item.id" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绣字位置" required v-show="fontData.fontType != 10">
                                <el-select v-model="fontData.fontLocaltion" placeholder="选择绣字位置"
                                           :style="{ width: '360px', marginRight: '10px' }">
                                    <el-option :label="item.xiuziLocaltion" :value="item.id" :key="index"
                                               v-for="(item, index) in fontData.fontLocaltionList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="绣字第一行" v-show="fontData.fontType == 0">
                                <el-input placeholder="请填写第一行绣字内容" v-model="fontData.oneXZ"
                                          :style="{ width: '360px', marginRight: '10px' }"></el-input>
                            </el-form-item>
                            <el-form-item label="绣字第二行" v-show="fontData.fontType == 0">
                                <el-input placeholder="请填写第二行绣字内容" v-model="fontData.twoXZ"
                                          :style="{ width: '360px' }"></el-input>
                            </el-form-item>

                            <el-form-item label="绣字字体" v-show="fontData.fontType == 0">
                                <el-input v-model="search_ziti_code" class="input_search" placeholder="请输入绣字字体编号" style="width: 320px;margin-right: 110px">
                                    <el-button slot="append" icon="el-icon-search" @click="click_getFontTypeListData(0)"></el-button>
                                </el-input>
                                <div class="clothes-list">
                                    <el-radio-group class="pic-radio-group" v-model="fontData.fontFamily" style="padding-top: 10px">
                                        <el-radio :label="item.id" v-for="(item, index) in fontData.fontFamilyList"
                                                  :key="index">
                                            <div class="pic-box">
                                                <img :src="item.embroideredImage" alt=""/>
                                            </div>
                                            <span class="No" style="bottom: 27px" >{{ item.embroideredName }}
                                            </span>
                                            <strong class="No" style="bottom: 2px" >{{ item.code }}</strong>

                                        </el-radio>
                                    </el-radio-group>
                                </div>

                                <!--分页插件-->
                                <div class="mom-pagination">
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            :total="xiuzipageTotal1"
                                            :page-size="xiuzipageSize1"
                                            :pager-count="xiuzipagerCount1"
                                            @next-click="xiuzicurrentPage+=1,xiuzi_handleCurrentChange1"
                                            @prev-click="xiuzicurrentPage-=1,xiuzi_handleCurrentChange1"
                                            @current-change="xiuzi_handleCurrentChange1"
                                    >
                                    </el-pagination>
                                </div>
                            </el-form-item>

                            <el-form-item label="绣字图片" v-show="fontData.fontType == 1">
                                <el-input v-model="search_img_code" class="input_search" placeholder="请输入绣字图片编号" style="width: 320px;margin-right: 110px">
                                    <el-button slot="append" icon="el-icon-search" @click="click_getFontTypeListData(1)"></el-button>
                                </el-input>
                                <div class="clothes-list">
                                    <el-radio-group class="pic-radio-group" v-model="fontData.fontPic" style="padding-top: 10px">
                                        <el-radio :label="item.id" v-for="(item, index) in fontData.fontPicList"
                                                  :key="index">
                                            <div class="pic-box">
                                                <img :src="item.embroideredImage" alt="" />
                                            </div>
                                            <span class="No" style="bottom: 27px">{{ item.embroideredName }}</span><br/>
                                            <strong class="No" style="bottom: 2px" >{{ item.code }}</strong>
                                        </el-radio>
                                    </el-radio-group>
                                </div>

                                <!--分页插件-->
                                <div class="mom-pagination">
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            :total="xiuzipageTotal2"
                                            :page-size="xiuzipageSize2"
                                            :pager-count="xiuzipagerCount2"
                                            @next-click="xiuzicurrentPage+=1,xiuzi_handleCurrentChange2"
                                            @prev-click="xiuzicurrentPage-=1,xiuzi_handleCurrentChange2"
                                            @current-change="xiuzi_handleCurrentChange2"
                                    >
                                    </el-pagination>
                                </div>
                            </el-form-item>

                            <el-form-item label="绣字颜色" v-show="fontData.fontType != 10 && fontData.fontType != 2">
                                <el-input v-model="search_color_code" class="input_search" placeholder="请输入绣字颜色编号" style="width: 320px;margin-right: 110px">
                                    <el-button slot="append" icon="el-icon-search" @click="click_getFontColorListData()"></el-button>
                                </el-input>
                                <div class="clothes-list">
                                    <el-radio-group class="pic-radio-group" v-model="fontData.fontColor" style="padding-top: 10px">
                                        <el-radio :label="item.id" v-for="(item, index) in fontData.fontColorList"
                                                  :key="index">
                                            <img :src="item.colorImg" alt=""/>
                                            <span class="No" style="bottom: 27px">{{ item.colorName }}</span>
                                            <strong class="No" style="bottom: 2px" >{{ item.code }}</strong>
                                        </el-radio>
                                    </el-radio-group>
                                </div>

                                <!--分页插件-->
                                <div class="mom-pagination">
                                    <el-pagination
                                            background
                                            layout="prev, pager, next"
                                            :total="xiuzipageTotal3"
                                            :page-size="xiuzipageSize3"
                                            :pager-count="xiuzipagerCount3"
                                            @next-click="xiuzicurrentPage+=1,xiuzi_handleCurrentChange3"
                                            @prev-click="xiuzicurrentPage-=1,xiuzi_handleCurrentChange3"
                                            @current-change="xiuzi_handleCurrentChange3"
                                    >
                                    </el-pagination>
                                </div>
                            </el-form-item>
                            <el-form-item label="绣字高度" v-show="fontData.fontType != 10">
                                <el-select v-model="fontData.fontHeight" placeholder="选择绣字高度"
                                           :style="{ width: '360px', marginRight: '10px' }" @change="changeFontType">
                                    <!--                                    <el-option label="20cm" :value="20"></el-option>-->
                                    <!--                                    <el-option label="25cm" :value="25"></el-option>-->
                                    <el-option
                                            v-for="item in fontData.fontHeightList"
                                            :key="item.embroideredHeight"
                                            :label="item.embroideredHeight"
                                            :value="item.id">
                                    </el-option>

                                </el-select>
                            </el-form-item>
                            <el-form-item class="upload-form-item" label="自定义图形" v-show="fontData.fontType == 2">
                                <div class="upload-box">
                                    <el-upload class="upload-item"
                                               action=" https://api.nbyid.cn/mlcc/user/interface/uploadImage"
                                               list-type="picture-card" :on-preview="handlePictureCardPreview"
                                               :on-remove="handleRemove" :on-success="handleSuccess" ref="upload">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="fontData.zidingyiImgDialogVisible">
                                        <img width="100%" :src="fontData.zidingyiImg" alt=""/>
                                    </el-dialog>
                                </div>
                            </el-form-item>
                            <el-form-item label="产品名称">
                                <el-input placeholder="请填写产品名称(可选)" v-model="colorData.proName"
                                          :style="{ width: '360px', marginRight: '10px' }"></el-input>
                            </el-form-item>
                            <el-form-item label="产品备注">
                                <el-input placeholder="请填产品备注" type="textarea" v-model="colorData.proRemark"
                                          rows="5"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="default" @click="resetAdd">取消</el-button>
                                <el-button type="primary" @click="addProductDepartment">添加到部门</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane class="store-pane" label="撞色选项" name="colorType" :dataId="1">
                        <el-form :model="colorData" class="color-form">
                            <ul class="color-list">
                                <li class="li-item" v-for="(v, i) in colorData.list" :key="i"
                                    @click="v.selected = !v.selected" :class="{ selected: v.selected }">
                                    <img :src="v.contrastColorImg" alt=""/>
                                    <el-button @click.stop="openItemColorFun(v)" class="btn" type="primary">{{
                                        v.selectColorItem ? v.selectColorItem.colorName : v.contrastColorName }}<i
                                                class="el-icon-caret-bottom"></i></el-button>
                                </li>
                            </ul>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!--绣字和撞色 end-->
        </div>
        <!--面料米数选择 start-->
        <el-dialog title="单件产品需求面料米数" v-if="buyFabricDialog" :visible.sync="buyFabricDialog" width="480px"
                   :close-on-click-modal="false" class="fabric-dialog">
            <el-form :model="buyFabricFrom" ref="buyFabricFrom" label-width="100px" class="fabric-form">
                <el-form-item label="面料编号：" required>
                    <el-input :value="buyFabricFrom.fabricCode" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="当前库存：" >
                    <el-input :value="`${buyFabricFrom.inventory}`"
                              disabled="disabled"></el-input>
                </el-form-item>

                <el-form-item label="估算单耗：">
                    <el-input v-model="buyFabricFrom.buyMun" placeholder="请输入购买米数" @blur.native.capture="numberChange"></el-input>
                </el-form-item>

                <el-form-item label="加工备注:" v-show="buyFabricFrom.fabricCode=='-999999'" required>
                    <el-input v-model="FabricRemark"  type="text" placeholder="请填写来料加工的备注" clearable></el-input>
                    <p class="p-text">详情请参照<a href="#" @click="seeDuizhao">《单耗对照表》</a></p>
                </el-form-item>

                <el-form-item class="form-btn-area">
                    <!--<el-button @click="buyFabricDialog = false">取 消</el-button>-->
                    <el-button type="primary" @click="buyFabricDialog = false">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--面料米数选择 end-->
        <!--选择颜色弹窗 start-->
        <el-drawer title="我是标题" :visible.sync="colorDrawerData.show" :with-header="false" class="color-drawer"
                   size="42%">
            <div class="drawer-title"><span>颜色选择</span></div>
            <div class="drawer-body">
                <div class="clothes-list">
                    <el-radio-group class="pic-radio-group" v-model="colorDrawerData.selectedId">
                        <el-radio :label="item.id" v-for="(item, index) in colorDrawerData.list" :key="index"
                                  @change="selectItemColorFun(item)">
                            <div class="pic-box">
                                <img :src="item.colorImg" alt=""/>
                            </div>
                            <span class="No">{{ item.colorName }}</span>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
        </el-drawer>
        <!--选择颜色弹窗-->

        <div style="width: 60px;height: 60px;background-color: #fff;border-radius: 10000px;box-shadow: 1px 1px 5px 2px #e5e5e5;position: fixed;bottom: 50px;left: 50px;">
            <p style="line-height: 60px;text-align: center;" @click="resetAdd"><a>返回</a></p>
        </div>

        <div v-show="backtop==true" style="width: 50px;height: 50px;border-radius: 500px;background-color: #2D2D2D;position:fixed;bottom: 80px;right: 40px;text-align: center;cursor: pointer;" @click="back_top">
            <img src="../../../assets/img/mlcc_top.png" width="40" height="40" style="margin-top: 5px;">
        </div>

    </div>

</template>

<script>
    import {getAction} from "../../../api/manage";
    import {
        add_products_todepart,
        getButtons,
        getFuLiaoList,
        getSingleFabricList,
        getTypeAndProcess,
        getXiuziList,
        query_AllContrastcolorInfo,
        query_AllembroiderColor,
        query_AllembroiderFont,
        query_categoryinfo,
        query_localtion,
        query_mstemplateinfo,
        getColorPagelist,
        getfontImgPagelist
    } from '@/api/group-order';

    let storage = window.localStorage;

    export default {
        name: 'clothingCustom',
        data() {
            return {
                backtop:false,
                pageTotal: 20, // 总条目
                pageSize: 10, // 页面大小
                currentPage: 1, // 当前页
                pagerCount: 5, // 总共有几页

                pageTotal2: 20, // 总条目
                pageSize2: 10, // 页面大小
                currentPage2: 1, // 当前页
                pagerCount2: 5, // 总共有几页

                pageTotal3: 20, // 总条目
                pageSize3: 10, // 页面大小
                currentPage3: 1, // 当前页
                pagerCount3: 5, // 总共有几页

                pageTotal4: 20, // 总条目
                pageSize4: 10, // 页面大小
                currentPage4: 1, // 当前页
                pagerCount4: 5, // 总共有几页

                search_ziti_code:'',//字体code,
                search_img_code:'',//图片code,
                search_color_code:'',//颜色code,
                xiuzipageTotal1: 20, // 总条目
                xiuzipageSize1: 10, // 页面大小
                xiuzicurrentPage1: 1, // 当前页
                xiuzipagerCount1: 5, // 总共有几页

                xiuzipageTotal2: 20, // 总条目
                xiuzipageSize2: 10, // 页面大小
                xiuzicurrentPage2: 1, // 当前页
                xiuzipagerCount2: 5, // 总共有几页

                xiuzipageTotal3: 20, // 总条目
                xiuzipageSize3: 10, // 页面大小
                xiuzicurrentPage3: 1, // 当前页
                xiuzipagerCount3: 5, // 总共有几页

                url: {
                    list: '/fabricAndOther/getFabricListnew', // 面料列表
                },
                stepTitle: [
                    {
                        icon: require('@/assets/img/group-order/u5401.png'),
                        name: '品类版型选择',
                        active: true
                    },
                    {
                        icon: require('@/assets/img/group-order/u5418.png'),
                        name: '面料与铺料',
                        active: false
                    },
                    {
                        icon: require('@/assets/img/group-order/u5407.png'),
                        name: '服装类别和工艺',
                        active: false
                    },
                    {
                        icon: require('@/assets/img/group-order/u5424.png'),
                        name: '绣字和撞色',
                        active: false
                    } /*,
                    {
                        icon: require('@/assets/img/group-order/u5413.png'),
                        name: '量体信息',
                        active: false
                    }*/
                ],
                heightdatalist: [],//绣字高度
                curStepIndex: 0,
                clothesTypeName: 'clothes_0',
                //服装类型选择数据
                clothesTypeData: {
                    loaded: false,
                    curItemData: null,
                    tabList: []
                },
                fabricTypeName: 'fabric',
                // 面料数据
                fabricData: {
                    loaded: false,
                    curItemData: null,
                    selectedId: '',
                    searchCode: '',
                    list: []
                },
                // 里布
                inFabricData: {
                    loaded: false,
                    curItemData: null,
                    selectedId: '',
                    searchCode: '',
                    list: []
                },
                // 底布
                botFabricData: {
                    loaded: false,
                    curItemData: null,
                    searchCode: '',
                    selectedId: '',
                    list: []
                },
                // 纽扣
                buttonData: {
                    loaded: false,
                    curItemData: null,
                    selectedId: '',
                    list: []
                },
                FabricRemark:'',//面料备注
                //购买面料弹窗状态
                buyFabricDialog: false,
                //购买面料表单
                buyFabricFrom: null,
                //类别工艺
                typeCraftData: {
                    loaded: false,
                    selectArr: {},
                    list: []
                },
                //绣字和撞色
                fontColorTypeName: 'fontType',
                //绣字表单
                fontData: {
                    fontType: 0,
                    fontLocaltion: '',
                    oneXZ: '',
                    twoXZ: '',
                    fontFamily: '',
                    fontColor: '',
                    fontPic: '',
                    fontHeight: '',
                    //绣字自定义图片
                    zidingyiImg: '',
                    zidingyiImgDialogVisible: false,
                    //绣字类型列表
                    fontTypeList: [
                        {
                            id: 10,
                            text: '无绣字'
                        },
                        {
                            id: 0,
                            text: '文字'
                        },
                        {
                            id: 1,
                            text: '图片'
                        },
                        {
                            id: 2,
                            text: '自定义图片'
                        }
                    ],
                    //字体列表
                    fontFamilyList: [],
                    //绣字颜色
                    fontColorList: [],
                    //图片列表
                    fontPicList: [],
                    //绣字高度数据
                    fontHeightList: [],
                    //绣字位置数据列表
                    fontLocaltionList: []
                },
                //撞色数据
                colorData: {
                    list: [],
                    proName: '',
                    proRemark: ''
                },
                //撞色弹窗中的颜色数据
                colorDrawerData: {
                    changeItem: null,
                    show: false,
                    list: []
                }
            };
        },
        //第一步
        mounted() {
            //获取当前的页面滚动事件，然后执行 this.showheader事件
            window.addEventListener('scroll', this.showheader);
            // this.show_userinfo();
        },
        destroyed() {
            window.removeEventListener('scroll', this.showheader);
        },
        created() {
            let that = this;
            let clothesTypeData = that.clothesTypeData;
            query_mstemplateinfo({
                module_id: 1,
                category_id: 0
            }).then(res => {
                if (res.status == 200 && res.data.code == 0) {
                    clothesTypeData.loaded = true;
                    let getData = res.data.data;
                    getData.forEach(v => {
                        v.list = [];
                        v.selectedItem = '';
                        that.clothesTypeData.tabList.push(v);
                    });
                    that.clothesTypeData.curItemData = that.clothesTypeData.tabList[0];
                    that.getClothesItemData(0);
                }
            });
            that.getFabricData();
        },
        methods: {
            //第二步
            showheader: function() {
                //当前屏幕等于多少执行的事件
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                this.scrollTop = scrollTop
                console.log(scrollTop)
                if (scrollTop > 541) {
                    //当屏幕大于541的时候，就显示，小于则不显示
                    this.show = true;
                    this.backtop=true;
                } else {
                    this.show = false;
                    this.backtop=false;
                }
            },
            back_top(){
                //返回头部的动画
                const that = this
                let timer = setInterval(() => {
                    let ispeed = Math.floor(-that.scrollTop / 7)
                    document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                    if (that.scrollTop === 0) {
                        clearInterval(timer)
                    }
                }, 10)
            },
            seeDuizhao(){//跳转单耗对照表
                let that = this;
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                getAction(domain.publicUrl + "/product/getcateId", {
                    'ids': category_ids.join()
                }).then(res => {
                    let routeUrl = this.$router.resolve({
                        path: "/duizhao",query: {id:res.data.data.id,type:2}
                    });
                    //let routeUrl = this.$router.resolve(`/share/${96}`)
                    window.open(routeUrl.href, '_blank');
                })

                // let routeUrl = this.$router.resolve({
                //     path: "/duizhao",query: {id:1}
                // });
                // //let routeUrl = this.$router.resolve(`/share/${96}`)
                // window.open(routeUrl.href, '_blank');
            },
            numberChange(){//面料米数的监听事件
                var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if (!reg.test(this.buyFabricFrom.buyMun)) {
                    this.$message.warning("请输入正确的米数,比如1或1.1")
                    this.buyFabricFrom.buyMun='1.0';
                    return
                }else {
                    let inputnumber = this.buyFabricFrom.buyMun;//10.234
                    if(inputnumber.split(".").length == 0){
                        this.buyFabricFrom.buyMun=inputnumber;
                        return;
                    }else {
                        var number_zu = inputnumber.toString().split(".");
                        var jisaun_number = inputnumber.split(".").join("");
                        // alert("数组=="+number_zu+"==涨肚="+number_zu.length+"=小数点后的=="+number_zu[1].length)
                        if(number_zu[1].length >= 0 && number_zu[1].length < 2){
                            this.buyFabricFrom.buyMun=inputnumber;
                            return;
                        }else if(number_zu[1].length >= 2){
                            let num1 = jisaun_number / 100 + 0.1;
                            let num2 = num1 * 10;
                            let num3 = num2 / 10;
                            var number_zu2 = num3.toString().split(".");
                            let lostnum = number_zu2[0]+"."+number_zu2[1].substring(0,1)
                            // var str = num3.substring(0,num3.length-1);//截取第二个到第四个之间的字符 cd
                            // alert(inputnumber+"==最后孩子=="+num1+"==="+num3+"==最后="+number_zu2+"=="+lostnum)
                            this.buyFabricFrom.buyMun=lostnum;
                            return;
                        }
                    }
                }
            },
            // 查询按钮
            onSubmit() {
                getAction(domain.publicUrl + this.url.list, {
                    'pageNo': this.currentPage,
                    'pageSize': 10
                }).then(res => {
                    let getData = res.data.data.records;
                    this.fabricData.list = getData
                    this.pagerCount = res.data.data.pages
                    this.pageTotal = res.data.data.total
                    this.pageSize = res.data.data.size
                    /*getData.forEach(v => {
                        v.buyMun = '';
                        this.fabricData.list = v;
                    });*/
                })
            },

            // 分页触发请求
            handleCurrentChange(val) {
                this.currentPage = val
                this.onSubmit()
            },
            handleCurrentChange2(val) {
                this.currentPage = val
                this.getInFabricData()
            },
            handleCurrentChange3(val) {
                this.currentPage = val
                this.getBotFabricData()
            },
            handleCurrentChange4(val) {
                this.currentPage = val
                this.getButtonData()
            },

            /**
             * @Date: 2020-11-07 22:31:51
             * @LastEditors: qwguo
             * @description: 绣字模块-------分页
             * @param {type} 参数说明
             * @return: 返回值
             */
            xiuzi_handleCurrentChange1(val){
                this.xiuzicurrentPage1 = val
                this.getFontTypeListData(0);
            },
            xiuzi_handleCurrentChange2(val){
                this.xiuzicurrentPage2 = val
                this.getFontTypeListData(1);
            },
            xiuzi_handleCurrentChange3(val){
                this.xiuzicurrentPage3 = val
                this.getFontColorListData();
            },

            click_getFontTypeListData(val){
                if(val==0){
                    this.xiuzicurrentPage1 = 1;
                }else {
                    this.xiuzicurrentPage2 = 1;
                }
                this.getFontTypeListData(val);
            },
            click_getFontColorListData(){
                this.xiuzicurrentPage3=1;
                this.getFontColorListData();
            },
            /**
             * @Date: 2020-11-07 22:31:51
             * @LastEditors: qwguo
             * @description: 步骤切换
             * @param {type} 参数说明
             * @return: 返回值
             */
            switchStep(index) {
                this.stepTitle.forEach((v, i) => {
                    v.active = i <= index;
                });
                this.curStepIndex = index;
                switch (index) {
                    case 1:
                        this.getFabricData();
                        break;
                    case 2:
                        this.getTypeCraftData();
                        break;
                    case 3:
                        this.getFontTypeListData(this.fontData.fontType);
                        this.getFontHeightListData(this.fontData.fontType);
                        this.getFontColorListData();
                        this.getFontLocationData();
                        break;
                }
            },
            /**
             * @Date: 2020-11-08 12:33:50
             * @LastEditors: qwguo
             * @description: 更改品类版型下边的标签切换
             * @param {type} 参数说明
             * @return: 返回值
             */
            changeClothesTypeTab(item) {
                let that = this,
                    index = item.$attrs.dataId - 1,
                    category_ids = [];
                that.clothesTypeData.curItemData = that.clothesTypeData.tabList[item.$attrs.dataId - 1];
                for (let i = 0; i < index; i++) {
                    let selected = that.clothesTypeData.tabList[i].selectedItem;
                    if (selected) {
                        category_ids.push(selected.id);
                    }
                }
                if (!this.clothesTypeData.curItemData.loaded) {
                    this.getClothesItemData(category_ids.join());
                }
            },
            /**
             * @Date: 2020-11-08 12:47:08
             * @LastEditors: qwguo
             * @description: 获取品类版型选择下标签的选项内容接口
             * @param {type} 参数说明
             * @return: 返回值
             */
            getClothesItemData(category_ids) {
                let that = this;
                let curItemData = that.clothesTypeData.curItemData;
                curItemData.list.splice(0, curItemData.list.length);
                query_categoryinfo({
                    template_id: curItemData['id'],
                    category_ids: category_ids
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        curItemData.loaded = true;
                        let getData = res.data.data;
                        getData.forEach(v => {
                            curItemData.list.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-08 19:59:19
             * @LastEditors: qwguo
             * @description: 点击选项更新选定内容
             * @param {type} 参数说明
             * @return: 返回值
             */
            clothesRadioChange(item, v) {
                let tag = false;
                if (item.selectedItem != v) {
                    item.selectedItem = v;
                    let tabList = this.clothesTypeData.tabList;
                    for (let i = 0; i < tabList.length; i++) {
                        if (tag) {
                            tabList[i].loaded = false;
                        }
                        if (tabList[i] == item) {
                            tag = true;
                        }
                    }
                }
            },
            /**
             * @Date: 2020-11-08 20:54:09
             * @LastEditors: qwguo
             * @description: 获取布料数据 （面料）
             * @param {type} 参数说明
             * @return: 返回值
             */
            getFabricData() {
                this.url.list = '/fabricAndOther/getFabricListnew'
                this.fabricData.list.splice(0, this.fabricData.list.length);
                let j = {
                    token: storage.getItem('token'),
                    fabricCode: this.fabricData.searchCode
                    // typeId: 0
                };
                if (this.fabricData.searchCode) {
                    j.fabeicCode = this.fabricData.searchCode;
                }
                getSingleFabricList(j).then(res => {
                    if (res.data.code == 0) {
                        let getData = res.data.data.records;
                        this.fabricData.list = getData
                        this.pageTotal = res.data.data.total
                        this.pageSize = res.data.data.size
                        /* getData.forEach(v => {
                             v.buyMun = '';
                             // this.fabricData.list.push(v);
                             this.fabricData.list = v;
                         });*/
                    }
                });
            },
            /**
             * @Date: 2020-11-08 20:54:09
             * @LastEditors: qwguo
             * @description: 获取布料数据 (里布)
             * @param {type} 参数说明
             * @return: 返回值
             */
            getInFabricData() {
                let that = this;
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                let curList = that.inFabricData.list;
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                curList.splice(0, curList.length);
                this.url.list = '/logic/interface/query_materialPageList'
                this.inFabricData.list.splice(0, this.inFabricData.list.length);
                let j = {
                    type: 0,
                    pageNo: this.currentPage,
                    pageSize: 10,
                    categoryIds: category_ids.join()
                };
                if (this.inFabricData.searchCode) {
                    j.code = this.inFabricData.searchCode;
                }
                getFuLiaoList(j).then(res => {
                    if (res.data.code == 0) {
                        let getData = res.data.data.records;
                        this.inFabricData.list = getData
                        this.pageTotal2 = res.data.data.total
                        this.pageSize = res.data.data.size
                        // this.pagerCount2=res.data.data.total/res.data.data.size
                        // getData.forEach(v => {
                        //      v.buyMun = '';
                        //      this.inFabricData.list.push(v);
                        //  });
                    }
                });
            },
            /**
             * @Date: 2020-11-08 20:54:09
             * @LastEditors: qwguo
             * @description: 获取布料数据 （低领尼）
             * @param {type} 参数说明
             * @return: 返回值
             */
            getBotFabricData() {
                let that = this;
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                let curList = that.botFabricData.list;
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                curList.splice(0, curList.length);
                this.url.list = '/logic/interface/query_materialPageList'
                this.botFabricData.list.splice(0, this.botFabricData.list.length);
                let j = {
                    type: 1,
                    pageNo: this.currentPage,
                    pageSize: 10,
                    categoryIds: category_ids.join()
                };
                if (this.botFabricData.searchCode) {
                    j.code = this.botFabricData.searchCode;
                }
                getFuLiaoList(j).then(res => {
                    if (res.data.code == 0) {
                        let getData = res.data.data.records;
                        this.botFabricData.list = getData
                        this.pageTotal3 = res.data.data.total
                        this.pageSize = res.data.data.size
                        // this.pagerCount3=res.data.data.total/res.data.data.size
                        // getData.forEach(v => {
                        //     v.buyMun = '';
                        //     this.botFabricData.list.push(v);
                        // });
                    }
                });
            },

            /**
             * @Date: 2020-11-08 20:54:09
             * @LastEditors: qwguo
             * @description: 获取纽扣数据 （纽扣）
             * @param {type} 参数说明
             * @return: 返回值
             */
            getButtonData() {
                // getButtonData() {
                //     this.buttonData.list.splice(0, this.buttonData.list.length);
                //     getButtons().then(res => {
                //         if (res.status == 200 && res.data.code == 0) {
                //             let getData = res.data.data;
                //             getData.forEach(v => {
                //                 this.buttonData.list.push(v);
                //             });
                //         }
                //     });
                // },
                let that = this;
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                let curList = that.buttonData.list;
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                curList.splice(0, curList.length);
                this.url.list = '/logic/interface/query_materialPageList'
                this.buttonData.list.splice(0, this.buttonData.list.length);
                let j = {
                    type: 2,
                    pageNo: this.currentPage,
                    pageSize: 10,
                    categoryIds: category_ids.join()
                };
                if (this.buttonData.searchCode) {
                    j.code = this.buttonData.searchCode;
                }
                getFuLiaoList(j).then(res => {
                    if (res.data.code == 0) {
                        let getData = res.data.data.records;
                        this.buttonData.list = getData
                        this.pageTotal4 = res.data.data.total
                        this.pageSize = res.data.data.size
                        // this.pagerCount4=res.data.data.total/res.data.data.size
                        // getData.forEach(v => {
                        //     v.buyMun = '';
                        //     this.botFabricData.list.push(v);
                        // });
                    }
                });
            },


            /**
             * @Date: 2020-11-11 23:42:30
             * @LastEditors: qwguo
             * @description: 选择相对于的面料方法
             * @param {type} 参数说明
             * @return: 返回值
             */
            fabricRadioChange(curData, item) {
                curData.curItemData = item;
            },
            /**
             * @Date: 2020-11-11 23:32:37
             * @LastEditors: qwguo
             * @description: 选择当前面料，打开购买米数
             * @param {type} 参数说明
             * @return: 返回值
             */
            selectCurFabric(item) {
                /*let that = this,
                    buyFabricFrom = that.buyFabricFrom;
                for (let k in item) {
                    buyFabricFrom[k] = item[k];
                }*/
                this.buyFabricFrom = item;
                this.buyFabricDialog = true;
            },
            /**
             * @Date: 2020-11-11 23:29:23
             * @LastEditors: qwguo
             * @description: 确认购买面料
             * @param {type} 参数说明
             * @return: 返回值
             */
            enterBuyFabric() {
                this.buyFabricDialog = false;
                this.butFabricBuyMun = this.fabricFrom.buy;
            },
            /**
             * @Date: 2020-11-08 21:43:08
             * @LastEditors: qwguo
             * @description: 获取按钮信息
             * @param {type} 参数说明
             * @return: 返回值
             */
            // getButtonData() {
            //     this.buttonData.list.splice(0, this.buttonData.list.length);
            //     getButtons().then(res => {
            //         if (res.status == 200 && res.data.code == 0) {
            //             let getData = res.data.data;
            //             getData.forEach(v => {
            //                 this.buttonData.list.push(v);
            //             });
            //         }
            //     });
            // },
            /**
             * @Date: 2020-11-08 21:22:23
             * @LastEditors: qwguo
             * @description: 更改布料标签切换
             * @param {type} 参数说明
             * @return: 返回值
             */
            changeFabricTypeTab(item) {
                switch (item.$attrs.dataId) {
                    case 0:
                        this.getFabricData();
                        break;
                    case 1:
                        this.getInFabricData();
                        break;
                    case 2:
                        this.getBotFabricData();
                        break;
                    case 3:
                        this.getButtonData();
                        break;
                }
            },
            /**
             * @Date: 2020-11-08 22:30:27
             * @LastEditors: qwguo
             * @description: 获取类别工艺数据
             * @param {type} 参数说明
             * @return: 返回值
             */
            getTypeCraftData() {
                let that = this,
                    j = {
                        token: storage.getItem('token'),
                        mouldid: 3
                    },
                    category_ids = [];
                that.clothesTypeData.tabList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                that.typeCraftData.loaded = false;
                that.typeCraftData.list.splice(0, that.typeCraftData.list.length);
                if (category_ids.length) {
                    j.typeids = category_ids.join();
                }
                getTypeAndProcess(j).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        let getData = res.data.data;
                        getData.forEach(v => {
                            if (that.typeCraftData[v.id]) {
                                v.selectedId = that.typeCraftData[v.id];
                            } else {
                                v.selectedId = '';
                            }

                            that.typeCraftData.list.push(v);
                        });
                        that.typeCraftData.loaded = true;
                    }
                });
            },
            /**
             * @Date: 2020-11-11 23:17:36
             * @LastEditors: qwguo
             * @description: 选择服装类型和工艺事件
             * @param {type} 参数说明
             * @return: 返回值
             */
            typeCraftRadioChange(item, v) {
                item.selectedId = v.id;
                this.typeCraftData[item.id] = v.id;
            },
            /**
             * @Date: 2020-11-08 21:22:23
             * @LastEditors: qwguo
             * @description: 绣字和撞色标签切换
             * @param {type} 参数说明
             * @return: 返回值
             */
            changeFontColorTypeTab(item) {
                switch (item.$attrs.dataId) {
                    case 0:
                        this.getFontTypeListData(this.fontData.fontType);
                        this.getFontHeightListData(this.fontData.fontType);
                        break;
                    case 1:
                        this.getColorListData();
                        break;
                }
            },
            /**
             * @Date: 2020-11-10 13:09:20
             * @LastEditors: qwguo
             * @description: 更改绣字类型
             * @param {type} 参数说明
             * @return: 返回值
             */
            changeFontType() {
                // alert(this.fontData.fontType)
                this.getFontHeightListData(this.fontData.fontType);
                if(this.fontData.fontType==0){
                    this.getFontTypeListData(0);
                }else if(this.fontData.fontType==1){
                    this.getFontTypeListData(1);
                }else {
                    this.getFontColorListData();
                }

            },
            /**
             * @Date: 2020-11-12 21:14:37
             * @LastEditors: qwguo
             * @description: 获取字体类型
             * @param {type} 参数说明
             * @return: 返回值
             */
            getFontTypeListData(type) {
                let that = this;
                if (type == 0) {//0字体，1图片
                    that.fontData.fontFamilyList=null;
                } else {
                    that.fontData.fontPicList=null;
                }
                // 添加选择的类型
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                let partmenters = {};
                if (type == 0 || type=='0') {//0字体，1图片
                    partmenters = {
                        category_ids: category_ids.join(),
                        type: type,
                        pageNo: this.xiuzicurrentPage1,
                        pageSize: 12,
                        code: this.search_ziti_code
                    }
                } else {
                    // curList = that.fontData.fontPicList;
                    partmenters = {
                        category_ids: category_ids.join(),
                        type: type,
                        pageNo:this.xiuzicurrentPage2,
                        pageSize:12,
                        code: this.search_img_code
                    }
                }
                getfontImgPagelist(partmenters).then(res => {
                    if (res.data.code == 0) {
                        // let getData = res.data.data;
                        // getData.forEach(v => {
                        //     curList.push(v);
                        // });
                        if(type==0){
                            // let getData = res.data.data.records;
                            that.fontData.fontFamilyList = res.data.data.records
                            this.xiuzipageTotal1 = res.data.data.total
                            this.xiuzipageSize1 = res.data.data.size
                            this.xiuzipagerCount1 =5
                        }else {
                            let getData = res.data.data.records;
                            that.fontData.fontPicList = getData
                            this.xiuzipageTotal2 = res.data.data.total
                            this.xiuzipageSize2 = res.data.data.size
                            this.xiuzipagerCount2 = 5
                        }

                    }
                });
            },
            /**
             * @Date: 2020-11-12 21:58:38
             * @LastEditors: qwguo
             * @description: 获取绣字颜色数据
             * @param {type} 参数说明
             * @return: 返回值
             */
            getFontColorListData() {
                let that = this;
                let fontColorList = that.fontData.fontColorList;
                // 添加选择的类型
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                let partmenters = {
                    category_ids: category_ids.join(),
                    pageNo:this.xiuzicurrentPage3,
                    pageSize:12,
                    code: this.search_color_code
                }
                fontColorList.splice(0, fontColorList.length);
                getColorPagelist(partmenters).then(res => {
                    if (res.data.code == 0) {
                        let getData = res.data.data.records;
                        this.fontData.fontColorList = getData
                        this.xiuzipageTotal3 = res.data.data.total
                        this.xiuzipageSize3 = res.data.data.size
                        this.xiuzipagerCount3 = 5
                        // getData.forEach(v => {
                        //     fontColorList.push(v);
                        // });
                    }
                });
            },
            /**
             * @Date: 2020-11-12 23:24:00
             * @LastEditors: qwguo
             * @description: 获取绣字高度数据
             * @param {type} 参数说明
             * @return: 返回值
             */
            getFontHeightListData(type) {
                let that = this;
                let curList = that.fontData.fontHeightList;
                curList.splice(0, curList.length);
                // 添加选择的类型
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                let is_wenzi = '文字';
                if (type == '0') {
                    is_wenzi = '文字';
                } else {
                    is_wenzi = '图片';
                }
                let partmenters = {
                    category_ids: category_ids.join(),
                    xiuziType: is_wenzi
                }
                getXiuziList(partmenters).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        // alert(res.data.data[0].embroideredHeight)
                        let getData = res.data.data;
                        getData.forEach(v => {
                            curList.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-13 23:16:31
             * @LastEditors: qwguo
             * @description: 获取绣字位置
             * @param {type} 参数说明
             * @return: 返回值
             */
            getFontLocationData() {
                let that = this;
                this.fontData.fontLocaltion = '';
                this.fontData.fontLocaltionList=[]
                let clothesList = that.clothesTypeData.tabList;
                let curList = that.fontData.fontLocaltionList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                query_localtion({
                    category_ids: category_ids.join()
                }).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        let getData = res.data.data;
                        getData.forEach((v, i) => {
                            if (i === 0) {
                                that.fontData.fontLocaltion = v.id;
                            }
                            curList.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-12 23:08:20
             * @LastEditors: qwguo
             * @description: 获取撞色数据
             * @param {type} 参数说明
             * @return: 返回值
             */
            getColorListData() {
                let that = this;
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                let curList = that.colorData.list;
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                curList.splice(0, curList.length);
                query_AllContrastcolorInfo({category_ids: category_ids.join()}).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        let getData = res.data.data;
                        getData.forEach(v => {
                            v.selected = false;
                            v.selectColorItem = null;
                            curList.push(v);
                        });
                    }
                });
            },
            /**
             * @Date: 2020-11-10 13:09:41
             * @LastEditors: qwguo
             * @description: 打开撞色选择颜色框
             * @param {type} 参数说明
             * @return: 返回值
             */
            openItemColorFun(item) {
                let that = this;
                let colorDrawerList = that.colorDrawerData.list;
                that.colorDrawerData.selectedId = '';
                that.colorDrawerData.changeItem = item;
                if (item.selectColorItem) {
                    that.colorDrawerData.selectedId = item.selectColorItem.id;
                }

                // 添加选择的类型
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                let partmenters = {
                    category_ids: category_ids.join()
                }
                colorDrawerList.splice(0, colorDrawerList.length);
                query_AllembroiderColor(partmenters).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        let getData = res.data.data;
                        getData.forEach(v => {
                            colorDrawerList.push(v);
                        });
                    }
                });
                that.colorDrawerData.show = true;
            },
            /**
             * @Date: 2020-11-13 09:37:20
             * @LastEditors: qwguo
             * @description: 确定选择当前颜色
             * @param {type} 参数说明
             * @return: 返回值
             */
            selectItemColorFun(item) {
                let that = this;
                that.colorDrawerData.changeItem.selectColorItem = item;
                that.colorDrawerData.show = false;
            },
            // 上传图片相关
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //绣字上传图片成功函数
            handleSuccess(response, file, fileList) {
                let result = response;
                this.fontData.zidingyiImg += result.data;
            },
            handlePictureCardPreview(file) {
                this.fontData.zidingyiImg = file.url;
                this.zidingyiImgDialogVisible = true;
            },
            /**
             * @Date: 2020-11-04 22:08:54
             * @LastEditors: qwguo
             * @description: 把添加到部门
             * @param {type} 参数说明
             * @return: 返回值
             */
            addProductDepartment() {
                let that = this,
                    text = false,
                    j = {
                        token: storage.getItem('token'),
                        departId: storage.getItem('departmentId'),
                        productName: that.colorData.proName,
                        remark: that.colorData.proRemark
                    };
                // 添加选择的类型
                let clothesList = that.clothesTypeData.tabList;
                let category_ids = [];
                clothesList.forEach(v => {
                    if (v.selectedItem) {
                        category_ids.push(v.selectedItem.id);
                    }
                });
                // console.log(category_ids);
                // if (category_ids.length) {
                //     j.categoryIds = category_ids.join();
                // }
                //面料
                let fabricIds = [];
                if (that.fabricData.curItemData) {
                    fabricIds.push(`${that.fabricData.curItemData.id}/${that.fabricData.curItemData.buyMun || 0}`);
                }
                if (that.inFabricData.curItemData) {
                    // fabricIds.push(`${that.inFabricData.curItemData.id}/${that.inFabricData.curItemData.buyMun || 0}`);
                    j.libuId=that.inFabricData.curItemData.id;
                }
                if (that.botFabricData.curItemData) {
                    // fabricIds.push(`${that.botFabricData.curItemData.id}/${that.botFabricData.curItemData.buyMun || 0}`);
                    j.dilinliId=that.botFabricData.curItemData.id;
                }
                if (fabricIds.length) {
                    j.fabricIds = fabricIds.join();
                }
                //面料备注
                if (that.FabricRemark!=null && that.FabricRemark!='') {
                    j.fabricRemark = this.FabricRemark;
                }
                //纽扣
                if (that.buttonData.selectedId) {
                    j.buttonsIds = that.buttonData.selectedId;
                }
                //服装类型工艺
                if (that.typeCraftData.list.length) {
                    that.typeCraftData.list.forEach(v => {
                        if (v.selectedId) {
                            category_ids.push(v.selectedId);
                        }
                    });
                }
                //把服装类型工艺添加到类型字段里
                if (category_ids.length) {
                    j.categoryIds = category_ids.join();
                }
                if (that.fontData.fontType == 0) {
                    j.xiuziType = '文字';
                    //绣字第一行文字
                    if (that.fontData.oneXZ) {
                        j.xiuziOneNeirong = that.fontData.oneXZ;
                    }
                    //绣字第二行文字
                    if (that.fontData.twoXZ) {
                        j.xiuziTwoNeirong = that.fontData.twoXZ;
                    }
                    //绣字字形
                    if (that.fontData.fontFamily) {
                        j.xiuziZiti = that.fontData.fontFamily;
                    }
                    //绣字颜色
                    if (that.fontData.fontColor) {
                        j.xiuziColor = that.fontData.fontColor;
                    }
                    //绣字高度
                    if (that.fontData.fontHeight) {
                        j.xiuziHeight = that.fontData.fontHeight;
                    }
                    //绣字位置
                    if (that.fontData.fontLocaltion) {
                        j.xiuziWeizhi = that.fontData.fontLocaltion;
                    }
                    j.xiuziImg = '';
                    j.zidingyiImg='';
                } else if (that.fontData.fontType == 1) {
                    j.xiuziType = '图片';
                    //绣字字形
                    if (that.fontData.fontPic) {
                        j.xiuziImg = that.fontData.fontPic;
                    }
                    //绣字颜色
                    if (that.fontData.fontColor) {
                        j.xiuziColor = that.fontData.fontColor;
                    }
                    //绣字高度
                    if (that.fontData.fontHeight) {
                        j.xiuziHeight = that.fontData.fontHeight;
                    }
                    //绣字位置
                    if (that.fontData.fontLocaltion) {
                        j.xiuziWeizhi = that.fontData.fontLocaltion;
                    }
                    j.xiuziOneNeirong = '';
                    j.xiuziTwoNeirong = '';
                    j.xiuziZiti = '';
                    j.zidingyiImg='';
                }else if (that.fontData.fontType == 2) {
                    j.xiuziType = '自定义图片';
                    j.zidingyiImg=that.fontData.zidingyiImg;
                    j.xiuziOneNeirong = '';
                    j.xiuziTwoNeirong = '';
                    j.xiuziImg = '';
                    j.xiuziZiti = '';
                    j.xiuziColor = '';
                    //绣字高度
                    if (that.fontData.fontHeight) {
                        j.xiuziHeight = that.fontData.fontHeight;
                    }
                    //绣字位置
                    if (that.fontData.fontLocaltion) {
                        j.xiuziWeizhi = that.fontData.fontLocaltion;
                    }
                }else {
                    //无绣字
                    j.xiuziType = '无绣字';
                    j.xiuziOneNeirong = '';
                    j.xiuziTwoNeirong = '';
                    j.xiuziImg = '';
                    j.xiuziZiti = '';
                    j.xiuziColor = '';
                    j.zidingyiImg='';
                    j.xiuziHeight = '';
                    j.xiuziWeizhi = '';
                }
                //撞色信息
                let zhuangseIds = [];
                if (that.colorData.list && that.colorData.list.length) {
                    that.colorData.list.forEach(v => {
                        if (v.selected) {
                            let curId = v.id;
                            if (v.selectColorItem) {
                                curId += `/${v.selectColorItem.colorName}`;
                            }
                            zhuangseIds.push(curId);
                        }
                    });
                }
                if (zhuangseIds.length) {
                    j.zhuangseIds = zhuangseIds.join();
                }
                // console.log(j);
                add_products_todepart(j).then(res => {
                    if (res.status == 200 && res.data.code == 0) {
                        this.$message.success("添加产品成功！")
                        if (that.$listeners['changeShowPage']) {
                            that.$emit('changeShowPage', 'addClothingCustom');
                        }
                    } else {
                        this.$message.error(res.data.msg)
                    }
                });
            },
            /**
             * @Date: 2020-11-13 09:50:09
             * @LastEditors: qwguo
             * @description: 取消高定事件
             * @param {type} 参数说明
             * @return: 返回值
             */
            resetAdd() {
                storage.removeItem('departmentId');
                if (this.$listeners['changeShowPage']) {
                    this.$emit('changeShowPage');
                }
            }
        }
    };
</script>

<style lang="scss">
    .GO-clothing-custom {
        .tip-area {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 70px;
        }

        .selected-tip-box {
            position: absolute;
            background-color: #282828;
            color: #fff;
            border-radius: 5px;
            padding: 10px 20px;
            right: -100%;
            white-space: nowrap;

            &:after {
                content: '';
                position: absolute;
                border-width: 5px 0 5px 5px;
                border-color: transparent #282828;
                border-style: dashed solid;
                left: 100%;
                top: 50%;
                transform: translateY(-50%);
            }

            &.tip-0 {
                top: 5px;
            }

            &.tip-1 {
                top: 55px;
            }

            &.tip-2 {
                top: 105px;
            }

            &.tip-3 {
                top: 155px;
            }

            &.tip-4 {
                top: 205px;
            }
        }

        .el-tabs__header {
            width: 250px;
        }

        .con-area {
            > div {
                position: relative;
            }
        }

        /*图片单选*/
        .pic-radio-group {
            .el-radio {
                border: 1px solid #ccc;
                display: inline-flex;
                vertical-align: top;

                .el-radio__input {
                    display: none;
                }

                .pic-box {
                    overflow: hidden;
                }

                .el-radio__label {
                    display: inline-flex;
                    margin-left: 0;
                    padding-left: 0;
                    box-sizing: border-box;
                }

                .No {
                    border-radius: 3px;
                    background-color: #eaeaea;
                    font-size: 13px;
                    position: absolute;
                    padding: 3px 5px;
                    font-weight: 400;
                }

                &.is-checked {
                    border-color: rgba(236, 205, 39, 1);

                    .No {
                        background-color: rgba(255, 236, 112, 1);
                        font-weight: 700;
                    }
                }
            }
        }

        /*衣服列表样式*/
        .clothes-list {
            .el-radio {
                width: 170px;
                height: 220px;
                vertical-align: top;
                margin: 0 26px 26px 0;

                .el-radio__label {
                    margin: 10px;
                }

                .img-box {
                    background: url('~@/assets/img/loading.gif') no-repeat center center;
                }

                img {
                    width: 156px;
                    height: 156px;
                }

                .No {
                    bottom: 10px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }

            .el-pagination {
                text-align: right;
            }

            .empty-box {
                padding: 20px;
                text-align: center;
            }
        }

        /*布料列表*/
        .fabric-list {
            .el-radio {
                margin: 0 26px 26px 0;
                width: 133px;
                height: 170px;
                border-color: #eaeaea;

                .pic-box {
                    width: 133px;
                    height: 133px;
                }

                .el-radio__label {
                    flex-direction: column;
                }

                .No {
                    top: 0;
                    right: 0;
                    border-radius: 0 0 0 5px;
                }

                .inventory {
                    width: 100%;
                    flex-shrink: 0;
                    height: 40px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 200;
                    color: #333;
                }
            }
        }

        /*搜索样式*/
        .search-box {
            padding: 0 0 20px;

            .label {
                color: #333;
                display: inline-block;
                margin: 0 30px 0 0;
                font-size: 14px;
            }
        }

        .list-item-title {
            span {
                display: inline-flex;
                border-radius: 5px;
                padding: 0 20px;
                height: 40px;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                color: #333;
                background-color: rgba(255, 236, 112, 1);
            }

            margin-bottom: 20px;
        }

        .slider-box {
            padding: 30px 0;
            width: 600px;

            .el-slider__runway {
                background-color: rgba(224, 224, 224, 1);
            }

            .el-slider__button {
                width: 12px;
                height: 12px;
                box-sizing: border-box;
                background-color: rgba(255, 236, 112, 1);
            }

            .el-slider__stop {
                background-color: rgba(255, 236, 112, 1);
            }
        }

        .empty-box {
            padding: 20px;
            text-align: center;
        }

        /* 绣字上传图片*/
        .upload-form-item {
            .upload-box {
                display: flex;
            }

            .el-upload-list {
                .el-upload-list__item {
                    width: 104px;
                    height: 104px;
                }
            }

            .upload-item {
                margin-right: 10px;
            }

            .el-upload {
                width: 104px;
                height: 104px;
                line-height: 104px;
            }
        }

        .type-craft-area {
            padding: 40px 55px;
        }

        .font-color-area {
            .el-textarea {
                width: 90%;
            }
        }

        /*撞色颜色列表*/
        .color-list {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;

            li {
                flex-shrink: 0;
                width: 232px;
                height: 280px;
                border: 1px solid #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin: 0 20px 20px 0;
                cursor: pointer;

                &:hover {
                    border-color: #ffe56d;
                }

                &.selected {
                    border-color: #f59010;
                }

                img {
                    width: 150px;
                    height: 200px;
                }

                .btn {
                    border-radius: 5px;
                    margin-top: 10px;

                    i {
                        margin-left: 5px;
                    }
                }
            }
        }

        /*撞色颜色选择项的弹窗*/
        .color-drawer {
            .el-drawer__body {
                padding: 20px;
            }

            .drawer-title {
                height: 27px;
                border-left: 5px solid #6f6f6f;
                display: flex;
                align-items: center;
                margin: 0 0 20px 0;
                font-weight: 400;

                span {
                    margin-left: 24px;
                    font-size: 15px;
                }
            }

            .el-drawer__body {
                height: 100%;
                overflow-y: auto;
            }

            .clothes-list {
                .el-radio {
                    width: 128px;
                    height: 160px;

                    .pic-box {
                        img {
                            width: 112px;
                            height: 112px;
                        }
                    }
                }
            }
        }
    }

    .mom-pagination {
        text-align: center;
        margin: 35px 0 0;
    }
</style>
